<script>
	import { KCol, KRow } from '@ikun-ui/grid';
</script>

<KRow cls="my-4 px-1 py-2 bg-orange-100">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
<KRow cls="my-4 px-1 py-2 bg-orange-100" justify="center">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
<KRow cls="my-4 px-1 py-2 bg-orange-100" justify="end">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
<KRow cls="my-4 px-1 py-2 bg-orange-100" justify="between">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
<KRow cls="my-4 px-1 py-2 bg-orange-100" justify="around">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
<KRow cls="my-4 px-1 py-2 bg-orange-100" justify="evenly">
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-200" /></KCol>
	<KCol span={6}><div class="rounded h-36px bg-orange-300" /></KCol>
</KRow>
